import React, { useEffect, useState } from 'react';
import { Button, Checkbox, Modal, Form, Input, Tree, notification } from "antd";
import "../../Index/CXY/styles/systemrole.scss"
import * as service from "../../../api/System"
import { FormOutlined, DeleteOutlined,CloseCircleOutlined } from '@ant-design/icons';
const { TextArea } = Input;
interface Props {

}
function SystemRole(props: Props) {
    const [roledata, setRoledata] = useState([])
    const [isModalOpen, setIsModalOpen] = useState(false);
    var [perms, setPerms] = useState([]);
    var [id, setId] = useState("")
    var [currentIndex, setCurrentIndex] = useState(0)
    var [roleName, setRoleName] = useState([])
    //调用Form的useForm()钩子函数
    const [form] = Form.useForm();

    useEffect(() => {
        getRolelist()
    }, [])
    const getRolelist = () => {
        service.role_list().then(res => {
            console.log(res);
            console.log(res.data.data[0].perms)
            setRoledata(res.data.data)
            setPerms(res.data.data[0].perms)
        })
    }
    const showModal = (values: any) => {
        // console.log(values.id);
        if (values.roleId) {
            setIsModalOpen(true);
            form.setFieldsValue(values)
        }
        else {
            form.resetFields()//清除对话框内容
            setIsModalOpen(true);//弹出对话框
        }
    };

    // 关闭弹框
    const handleCancel = () => {
        setIsModalOpen(false)
    };
    // 提交表单
    const onFinish = (values: any) => {
        console.log('Success:', values);
        if (id) {
            service.role_update({
                roleId: id,
                roleName: values.roleName,
                roleIntroduce: values.roleIntroduce
            }).then((res) => {
                console.log(res);
                notification.success({
                    placement: "top",
                    message: "编辑角色成功！"
                })
                getRolelist()
                setIsModalOpen(false);
            })
        } else {
            service.role_add({
                roleName: values.roleName,
                roleIntroduce: values.roleIntroduce
            }).then(res => {
                console.log(res)
                notification.success({
                    placement: "top",
                    message: "添加角色成功！"
                })
                getRolelist()
                setIsModalOpen(false);
            })
        }
    };

    var onCheck = (perms: any) => {
        form.setFieldValue("perms", perms)
        setPerms(perms)
        console.log(perms);
    }
    const treeData = [
        {
            title: '全部',
            key: '0-0-0',
            children: [
                {
                    title: '签约管理',
                    key: '0-1-0',
                    children: [
                        {
                            title: '待预约处理',
                            key: '0-1-1',
                        },
                        {
                            title: '签约记录',
                            key: '0-1-2',
                        },
                    ],
                },
                {
                    title: '服务管理',
                    key: '0-2-0',
                    children: [
                        {
                            title: '待处理服务',
                            key: "0-2-1",
                        },
                        {
                            title: '服务记录',
                            key: "0-2-2",
                        },
                    ],
                },
                {
                    title: '居民管理',
                    key: '0-3-0',
                },
                {
                    title: '消息管理',
                    key: '0-4-0',
                },
                {
                    title: '资料管理',
                    key: '0-5-0',
                    children: [
                        {
                            title: '机构管理',
                            key: "0-5-1",
                        },
                        {
                            title: '团队管理',
                            key: "0-5-2",
                        },
                        {
                            title: '医生管理',
                            key: "0-5-3",
                        },
                        {
                            title: '服务包管理',
                            key: "0-5-4",
                        },
                        {
                            title: '服务项目管理',
                            key: "0-5-5",
                        },
                        {
                            title: '业绩目标管理',
                            key: "0-5-6",
                        },
                    ],
                },
                {
                    title: '数据统计',
                    key: '0-6-0',
                    children: [
                        {
                            title: '数据概况',
                            key: "0-6-1",
                        },
                        {
                            title: '签约业绩统计',
                            key: "0-6-2",
                        },
                        {
                            title: '服务业绩统计',
                            key: "0-6-3",
                        },
                        {
                            title: '居民健康异常统计',
                            key: "0-6-4",
                        },
                        {
                            title: '居民标签统计',
                            key: "0-6-5",
                        },
                        {
                            title: '居民年龄统计',
                            key: "0-6-6",
                        },
                        {
                            title: '居民学历统计',
                            key: "0-6-7",
                        },
                        {
                            title: '居性别统计',
                            key: "0-6-8",
                        },
                    ],
                },
                {
                    title: '系统设置',
                    key: '0-7-0',
                    children: [
                        {
                            title: '标签管理',
                            key: "0-7-1",
                        },
                        {
                            title: '角色管理',
                            key: "0-7-2",
                        },
                        {
                            title: '资讯管理',
                            key: "0-7-3",
                        },
                        {
                            title: '药品管理',
                            key: "0-7-4",
                        },
                        {
                            title: '轮播图管理',
                            key: "0-7-5",
                        },
                        {
                            title: '系统公告',
                            key: "0-7-6",
                        },
                        {
                            title: '协议管理',
                            key: "0-7-7",
                        },
                        {
                            title: '操作日志',
                            key: "0-7-8",
                        },
                    ],
                },
            ]
        }
    ];
    const choose = (values: any, index: any) => {
        console.log(values, index);
        setCurrentIndex(index)
        setPerms(values.perms)
        setId(values.roleId)
        setRoleName(values.roleName)
    }
    const save = () => {
        console.log(id);
        // console.log(perms.join(","));
        service.role_saveRole({ roleId: id, perms: perms }).then((res) => {
            console.log(res);
            getRolelist()
            notification.success({
                placement: "top",
                message: "保存成功！"
            })
        })
    }
    // 删除角色
    const delRole = (roleId: any) => {
        Modal.confirm({
            icon: <CloseCircleOutlined style={{ color: "red" }} />,
            title: '删除标签',
            okText: '确认',
            cancelText: '取消',
            content: '确认要删除吗？',
            onOk() {
                service.role_delete({ roleId }).then((res) => {
                    console.log(res);
                    getRolelist()
                    notification.success({
                        placement: "top",
                        message: "删除成功！"
                    })
                })
            },
        });

    }
    return (
        <div className='system-role'>

            <div className='role-header'>
                <h4>角色管理</h4>
                <Button type="primary" onClick={() => save()}>保存</Button>
            </div>
            <div className="role-box">
                <div className='rolebox-left'>
                    <div className="role">
                        <b>角色</b>
                        <b style={{ color: "#5da2f9",cursor:"pointer",marginBottom:10 }} onClick={showModal}>+新增角色</b>
                    </div>
                    {/* <br/> */}
                    <ul>
                        {
                            roledata.map((item: any, index) => {
                                return (
                                    <li className={currentIndex === index ? 'active' : ''} key={index} onClick={() => { choose(item, index) }}>
                                        <p>{item.roleName}</p>
                                        <FormOutlined style={{ color: "#5da2f9" }} onClick={() => { showModal(item) }} />
                                        <DeleteOutlined style={{ color: 'lightcoral' }} onClick={() => { delRole(item.roleId) }} />
                                    </li>
                                )
                            })
                        }
                    </ul>
                </div>
                <div className='rolebox-right'>
                    <p>管理角色权限</p>
                    <Tree
                        checkable
                        onCheck={onCheck}
                        treeData={treeData}
                        checkedKeys={perms}
                        defaultExpandAll
                    />
                </div>
            </div>
            <Modal
                forceRender
                getContainer={false}
                title="角色信息"
                open={isModalOpen}
                onCancel={handleCancel}
                footer={null}
            >
                <Form
                    form={form}
                    labelCol={{ span: 4 }}
                    style={{ maxWidth: 600 }}
                    initialValues={{ remember: true }}
                    onFinish={onFinish}
                >
                    <Form.Item
                        label="角色名称"
                        name="roleName"
                    >
                        <Input placeholder='请输入' />
                    </Form.Item>
                    <Form.Item
                        label="角色介绍"
                        name="roleIntroduce"
                    >
                        <TextArea placeholder='请输入' rows={6} />
                    </Form.Item>
                    <Form.Item
                        label="创建时间"
                        name="createtime"
                    >
                        <p>2021年09月24日 10:13</p>
                    </Form.Item>
                    <Form.Item
                        label="创建人"
                        name="person"
                    >
                        <p>王丽心</p>
                    </Form.Item>
                    <Form.Item wrapperCol={{ offset: 4, span: 16 }}>
                        <Button style={{ marginTop: 20 }} type="primary" htmlType="submit">
                            确认
                        </Button>
                    </Form.Item>
                </Form>
                <br />
            </Modal>
        </div>
    );
}

export default SystemRole;